<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        table{
            width: 400px;
            line-height: 40px;
            margin: 50px auto;
            text-align: center;
            font-size: 14px;

            border-collapse: collapse;
        }
        table,td{
            border: 1px solid #333;
        }

    </style>
</head>
<body>
    <table id="table">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>总分</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
    </table>
</body>
<script>
    /* 有一个二维数组    
    var list = [
        ["张三", 55, 66, 77], 
        ["李四", 67, 89, 90], 
        ["王五", 96, 50, 87],
    ]

     [1,"hello",true,null,undefined,function(){},[100,200,300]] 
    根据二维数组  动态生成表格    => 通过中间变量 二维转一维

    var item = list[0];   // ["张三", 55, 66, 77]
    item[0] 
    
    */

    var table = document.getElementById("table");

    var list = [
        ["张三", 55, 66, 77], 
        ["李四", 67, 89, 90], 
        ["王五", 96, 50, 87],
    ]

    // list[2][2]

    // 问题1: 普通字符串("",'')不允许换行
    // 解决方法:
    // (1) 不允许换行,咱就不换行 (缺点: 如果html结构比较复杂, 代码不清晰)
    // (2) 拆分为多字符串拼接的形式  (缺点: 拼接起来比较麻烦)
    // (3) ES6 新增模版字符串(``),允许字符串换行 => 有插值语句(${}),方便在字符串中拼接变量,执行一些简单的JavaScript表达式

    // var html = "<tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>总分</td></tr>";

    // var html = "<tr>"+
    //         "<td>姓名</td>"+
    //         "<td>语文</td>"+
    //         "<td>数学</td>"+
    //         "<td>英语</td>"+
    //         "<td>总分</td>"+
    //     "</tr>"

    var html = `<tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>总分</td>
        </tr>`

    for(var i = 0;i<list.length;i++){
        html += "<tr>";
        
        var item = list[i]; //  ["张三", 55, 66, 77]
        var sum = 0;
        for(var j = 0; j<item.length;j++){ // list[i].length
            var ele = item[j]; // list[i][j]
            // 传统字符串拼接方式
            // html += "<td>"+ele+"</td>";
            // ES6 模版字符串
            html += `<td>${ele}</td>`;

            if(j == 0) continue;
            sum += ele;
        }
        console.log(sum);
        html += `<td>${sum}</td>`;
            
            
        html += "</tr>";
    }

    table.innerHTML = html;


  

  




</script>
</html>